<template>
	<view class="scroll-container">
		<swiper class="scroll-container" :duration="duration" :current="swiperIndex" @change="difference">
			<swiper-item class="scroll-container" :key="index" v-for="(item, index) in group">
				<scroll :threshold="threshold" :load="item" :index="index" @scrollHandle="scrollHandle"
					:triggered="triggeredList[index]" :bgColor="bgColor" :enabled="enabled" :map="map">
					<slot :name="'container'+index"></slot>
				</scroll>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import scroll from '../scroll/scroll.vue'
	export default {
		name: "tabsScroll",
		components: {
			scroll
		},
		props: {
			group: {
				type: Array,
				default: () => {
					return []
				}
			},
			duration: {
				type: Number,
				default: 200
			},
			threshold: {
				type: Number,
				default: 100
			},
			swiperCurrent: {
				type: Number,
				default: 0
			},
			triggered:Boolean,
			enabled: {
				type: Boolean,
				default: true
			},
			bgColor: String,
			map: {
				type: Object,
				default: () => {
					return {
						page: "page",
						pageSize: "pageSize",
						total: "total",
					}
				}
			},
		},
		data() {
			return {
				swiperIndex: 0,
				triggeredList: []
			}
		},
		watch: {
			'swiperCurrent': {
				immediate: true,
				deep: true,
				handler(val) {
					if (this.swiperIndex != val) {
						this.swiperIndex = val
					}
				}
			},
			"triggered": {
				immediate: true,
				deep: true,
				handler(val) {
					this.triggeredList[this.swiperIndex] = val
					this.$forceUpdate()
				}
			},
			"group": {
				immediate: true,
				deep: true,
				handler(val) {
					this.triggeredList = []
					val.map(item => {
						this.triggeredList.push(false)
					})
				}
			}
		},
		created() {
			// _this = this
		},
		methods: {
			difference(e) {
				let current = e.detail.current
				if (current != this.swiperIndex) {
					this.swiperIndex = current
					this.$emit('difference', current)
				}
			},
			scrollHandle(data) {
				this.$emit('scrollHandle', data)
			}
		}
	}
</script>

<style scoped lang="scss">
	.scroll-container {
		height: 100%;
	}
</style>